<!-- 查询成绩 -->
<template>
    <TitleInfo title="成绩查询" />

    <el-form v-show="status==0" label-width="auto"  :rules="rules" :model="searchParam" ref="ruleFormRef"  style="max-width: 600px;margin: 45px auto 0;">
        <el-form-item label="姓名：" prop="name">
            <el-input v-model="searchParam.name" size="large" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="证件号：" prop="idCar">
            <el-input v-model="searchParam.idCar" size="large" maxlength="18" placeholder="请输入证件号" />
        </el-form-item>
        <el-form-item label="报考项目：" prop="projectId">
            <el-select v-model="searchParam.projectId" placeholder="请选择报考项目" @change="findLevelList" size="large">
                <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="报考等级：" prop="levelId">
            <el-select v-model="searchParam.levelId" placeholder="请选择报考等级" @change="findShowingsList" size="large">
                <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="报考场次：" prop="showingsId">
            <el-select v-model="searchParam.showingsId" placeholder="请选择报考场次"   size="large">
                <el-option v-for="item in showingsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item>
            <div class="btn_all">

                <el-button class="btn_step" type="primary" @click="onSubmit(ruleFormRef)">查询考试成绩</el-button>
            </div>
        </el-form-item>
    </el-form>

    <div v-show="status==1">
        <el-table :data="dataSource" v-if="dataSource.length>0" style="width: 100%">
           <el-table-column label="准考证号" prop="admissionNum" align="center"  />
          <el-table-column label="考试模块" prop="name" align="center" /> 
          <el-table-column label="考试时间" prop="courseDate" align="center" /> 
          <el-table-column label="考试成绩" prop="score" align="center" />  
    </el-table>
      <el-empty v-else :description="description"></el-empty>
      <div class="btn_all"> 
       <el-button class="btn_step" type="primary" @click="step">返回成绩查询</el-button>
      </div>
    </div>


</template>
<script setup lang="ts">
import { FormRules, FormInstance } from "element-plus";
import type { SearchParam, ShowingsModel, ProjectModel, LevelModel ,SearchModel} from "../../api/person/exam"
import { projectListApi, levelListApi, showingsListApi,searchScoreApi } from "../../api/person/exam"
const ruleFormRef = ref<FormInstance>()
const searchParam=ref<SearchParam>({name:'',idCar:'',projectId:'',levelId:'',showingsId:''})
const levelList = ref<LevelModel[]>([])
const showingsList = ref<ShowingsModel[]>()
const projectList = ref<ProjectModel[]>([])
const status=ref<number>(0)
const description = ref<string>('未查询到信息')
const rules = reactive<FormRules<SearchParam>>({
    projectId: [
        { required: true, message: '请选择报考项目', trigger: 'change' },
    ],
    levelId: [
        { required: true, message: '请选择报考等级', trigger: 'change' },
    ],
    showingsId: [
        { required: true, message: '请选择报考场次', trigger: 'change' },
    ],
    name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
    ],
    idCar: [
    { 
      required: true,  
      pattern: /^(?:\d{15}|\d{18}|\d{17}X)$/, 
      message: '请输入有效的身份证号', 
      trigger: 'blur' 
    }
    ],

});

onMounted(async () => {
    const response = await projectListApi()
    if (response.code === 200) {
        projectList.value = response.data ?? []
    } else {
        ElMessage.error(response.msg)
    }
})

async function findLevelList() {
    const res = await levelListApi(searchParam.value.projectId)
    if (res.code === 200) {
        levelList.value = res.data ?? []
    } else {
        ElMessage.error(res.msg)
    }
}

async function findShowingsList() {
    const res = await showingsListApi(searchParam.value.projectId, searchParam.value.levelId)
    if (res.code === 200) {
        showingsList.value = res.data ?? []
    } else {
        ElMessage.error(res.msg)
    }
}

async function onSubmit(formEl: FormInstance | undefined) { 
    if (!formEl) return;
    await formEl.validate(async (valid, fields) => {
        if (valid) {
             status.value=1
            const res= await searchScoreApi(searchParam.value)
            if(res.code===200){
                dataSource.value=res.data??[]
            }
        } else {
            console.log("error submit!", fields);
        }
    });
}

const dataSource = ref<SearchModel[]>([{
    admissionNum:'',
    name:'',
    courseDate:'',
    score:''
}
    
])
function step(){
    status.value=0
}

</script>
<style scoped lang='less'>
:deep(.el-form-item__content) {
    justify-content: center;
}

.btn_step {
    margin: 20px 10px 0;
    display: block;
    width: 213px;
    height: 48px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin: 30px auto 0;
    background-color: #345aa3;
    cursor: pointer;
}
</style>